<template>
  <view class="app">
    <!-- 内容区域  -->
    <view class="contentArea">
      <!-- table表格 -->
      <view class="table">
        <!-- Table表头 -->
        <view class="tableHead">
          <view class="tableHeadName">危险源名称</view>
          <view class="tableHeadName" style="flex-grow: 8">危险源或潜在事件</view>
          <view class="tableHeadName">排查人</view>
          <view class="tableHeadName">排查日期</view>
          <view class="tableHeadName">状态</view>
        </view>
        <!-- /Table表头 -->

        <scroll-view
          scroll-y
          style="height: 88vh"
          @scrolltolower="leaveTheUpdateData"
        >
          <!-- Table内容 -->
          <view v-if="checkTheListData && checkTheListData.length > 0">
            <view
              class="tableContent"
              v-for="item in checkTheListData"
              :key="item.id"
            >
              <!-- 措施名称 -->
              <view class="tableContentValue"> {{ item.operationSteps }} </view>
              <!-- 内容 -->
              <view
                class="tableContentValue operationCharacterStyle"
                style="flex-grow: 8"
              >
                {{ item.hazardSource || "" }}
              </view>
              <!-- 排查人 -->
              <view class="tableContentValue"> {{ item.checkPeo || "" }} </view>
              <!-- 排查日期 -->
              <view class="tableContentValue">
                {{ item.checkDate || "" }}
              </view>
              <!-- 状态 -->
              <view
                v-if="item.riskState == '隐患'"
                :class="
                  item.riskState == '隐患'
                    ? 'tableContentValue hiddenDangerStyle'
                    : 'tableContentValue'
                "
              >
                {{ item.riskState }}
              </view>
              <view
                v-else
                :class="
                  item.riskState == '隐患'
                    ? 'tableContentValue hiddenDangerStyle'
                    : 'tableContentValue'
                "
                @click="normallyClickEvent({item})"
              >
                {{ item.riskState }}
              </view>
            </view>
          </view>

          <!-- 暂无数据 -->
             
          <view v-else class="empty-block" style="transform: translateY(50%)">
                 
            <u-empty text="暂无数据" mode="data" icon-size="80"></u-empty>    
          </view>
        </scroll-view>
      </view>
      <!-- /table表格 -->
    </view>
    <!-- /内容区域  -->

    <!-- 弹出框 -->
    <u-popup
      :show="imageState"
      mode="center"
      round="6rpx"
      @close="imagePopupClose"
    >
      <view class="popup-block">
        <view class="image-list">
          <image
            class="item-image"
            mode="aspectFill"
            v-for="(item, index) in ossImg"
            :key="index"
            :src="item.url"
            @click="previewImage(item.url)"
          ></image>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
/**
 * 引入API请求接口
 * newqueryRecordsAccordingToTheControlMeasureId: 根据管控措施ID查询排查记录
 */
import { newqueryRecordsAccordingToTheControlMeasureId } from "@/apis/risk/index.js";

export default {
  /**
   * 定义数据
   */
  data() {
    return {
      /* 排查记录列表数据 */
      checkTheListData: null,
      /* 请求携带的参数 */
      params: {
        // 页数
        pageNo: 1,
        // 条数
        pageSize: 10,
        // 管控措施Id
        // controlId: undefined,
      },
      /* 当前行图片 */
      ossImg: [],
      /* 展示图片对话框 */
      imageState: false,
    };
  },

  /**
   * 获取路由传参
   */
  onLoad(options) {
    /* 给管控措施Id 赋值 */
    this.params.hazardId = options.hazardId;
  },

  /**
   * 定义方法
   */
  methods: {
    //#region API 请求接口封装
    /* 封装根据管控措施ID查询排查记录 */
    async newqueryRecordsAccordingToTheControlMeasureId() {
      const res = await newqueryRecordsAccordingToTheControlMeasureId(
        this.params
      );
      if (this.checkTheListData) {
        this.checkTheListData = [...this.checkTheListData, ...res.list];
      } else {
        this.checkTheListData = res.list;
      }
    },
    //#endregion

    /* 触底查询给更多数据 */
    leaveTheUpdateData() {
      this.params.pageNo++;
      this.newqueryRecordsAccordingToTheControlMeasureId();
    },

    /* 正常状态点击事件 */
    normallyClickEvent(rowData) {
      console.log(rowData)
      // 判断当前数据中是否有图片
      if (rowData.item.ossImg.length <= 0)
        return uni.showToast({ title: "未找到图片", icon: "none" });
      // 当前数据图片赋值给弹框中
      this.ossImg = rowData.item.ossImg;
      // 弹框Flag
      this.imageState = true;
    },

    /* 打开简略图片 */
    previewImage(url) {
      console.log(url)
      // 弹框打开图片
      uni.previewImage({
        urls: [url],
        fail: () => {
          uni.showToast({ title: "图片加载失败", icon: "none" });
        },
      });
    },

    /* 关闭弹框 */
    imagePopupClose() {
      this.imageState = false;
      this.ossImg = [];
    },
  },

  /**
   * Vue 创建钩子
   */
  created() {
    setTimeout(() => {
      /* 获取排查记录列表数据 */
      this.newqueryRecordsAccordingToTheControlMeasureId();
    }, 0);
  },
};
</script>

<style lang="scss" scoped>
.contentArea {
  width: 714rpx;
  background: #ffffff;
  border-radius: 10rpx;
  padding: 0 8rpx;
  padding-top: 33rpx;
  box-sizing: border-box;

  /* table表样式 */
  .table {
    /* 表头样式 */
    .tableHead {
      display: flex;
      align-items: center;
      justify-content: center;

      /* 表头item */
      .tableHeadName {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 78rpx;
        // padding: 0 13rpx;
        flex: 5;
        font-size: 24rpx;
        font-weight: 600;
        color: #ffffff;
        background-color: #81aef4;
      }
    }

    /* table内容区域样式 */
    .tableContent {
      display: flex;
      border-bottom: 1px solid #dad9d9;
      /* 内容值 */
      .tableContentValue {
        background-color: #fff;
        font-size: 22rpx;
        font-weight: 400;
        min-height: 78rpx;
        color: #666;

        display: flex;
        justify-content: center;
        align-items: center;
        flex: 5;
      }
      /* 操作按钮样式 */
      .operationCharacterStyle {
        font-size: 24rpx;
        font-weight: 400;
        color: #157ffb;
      }

      .hiddenDangerStyle {
        font-size: 24rpx;
        font-weight: 400;
        color: #ff9103;
      }
    }
  }
}

.popup-block {
  width: 600rpx;
  padding: 20rpx;
  .image-list {
    display: flex;
    flex-wrap: wrap;
    .item-image {
      width: 180rpx;
      height: 180rpx;
      border-radius: 10rpx;
      background-color: #cccccc;
      margin: 10rpx;
    }
  }
  .popup-title {
    font-size: 30rpx;
    line-height: 42rpx;
    font-weight: 500;
    text-align: center;
  }
  .button-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>